<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from "echarts";
let myHeading = ref(null)
onMounted(()=>{
  // let {proxy} = getCurrentInstance();
  // console.log(proxy.$echarts)
  // console.log(proxy.$axios)
  let myEcharts = echarts.init(myHeading.value);
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
  const option =  {
    title: {
      text: '数据分析',
      top: '8%',
      left: '8%',
      textStyle: {
        fontWeight: 500,
        fontSize: 18,
        color: '#000000'
      }
    },
    legend: {
      top: '30%',
      left: '10%',
      itemGap: 40,
      icon: 'square',
      data: [
        '家具种类占比',
        '商品种类占比'
      ],
      orient: 'vertical',
      formatter: function (name) {
        const sum = 1000
        if (name === '家具种类占比') {
          const percentage = ((568 / sum) * 100).toFixed(2)
          return '{a|' + name + '}\n{b|' + percentage + '%}'
        } else {
          const percentage = ((432 / sum) * 100).toFixed(2)
          return '{a|' + name + '}\n{b|' + percentage + '%}'
        }
      },
      textStyle: {
        rich: {
          a: {
            color: '#878787',
            fontWeight: '400',
            fontSize: 12
          },
          b: {
            color: '#000000',
            fontWeight: '300',
            fontSize: 18,
            lineHeight: 40
          }
        }
      }
    },
    series: [
      {
        name: 'Access From',
        right: '-30%',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '60%'],
        label: {
          position: 'inner',
          fontSize: 10,
          color: '#ffffff',
          fontWeight: 500,
          formatter: function (params) {
            const sum = 1000
            // for (let i = 0; i < option.series[0].data.length; i++) {
            //   sum += option.series[0].data[i].value;
            // }
            const percentage = ((params.value / sum) * 100).toFixed(2)
            return `${percentage}%\n${params.name}`
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 568,
            name: '家具种类占比',
            itemStyle: {
              color: '#ffb300'
            }
          },
          {
            value: 432,
            name: '商品种类占比',
            itemStyle: {
              color: '#e39342'
            }
          }
        ]
      }
    ]
  }
  myEcharts.setOption(option)
})
</script>

<template>
  <div id="echarts" ref="myHeading" style="width: 48%; height: 370px"></div>
</template>

<style scoped lang="scss">
#echarts{
  //margin-top: 15px;
  box-shadow: 0px 10px 16px 0px
  rgba(132, 132, 152, 0.68);
  background: white;
  opacity: 0.9;
  border-radius: 15px;
  ::v-deep >div:first-child{
    width: 100%!important;
    canvas{
      width: 100%!important;
    }
  }
}
</style>
